<style rel="stylesheet/scss" lang="scss">
@import "../../../../styles/prod.scss";

.pack-con {
  .upload-item {
    .el-col {
      height: 80px;
    }
    .el-main {
      padding: 0;
    }
    .upload-name {
      font-size: 14px;
      padding-top: 30px;
    }
    .upload-tip {
      font-size: 12px;
      color: #999;
      padding-bottom: 20px;
    }
  }
  .mr-20 {
    margin-right: 20px;
  }
  .el-collapse-item__header {
    font-size: 16px !important;
    background: rgba(223, 223, 223, 1);
    padding-left: 20px;
    // line-height: 40px;
    // height: 40px;
  }
  .packing-require .el-form-item {
    margin: 10px;
    margin-top: 15px;
    div {
      vertical-align: middle;
    }
    label {
      // margin-left: 60px;
    }
    .other-input {
      display: inline-block;
      width: 120px;
      margin-left: 20px;
      vertical-align: middle;
    }
  }
  .card-container {
    position: relative;
  }
  .check-right {
    position: absolute;
    right: 20px;
    top: -20px;
  }
  .label-left {
    font-size: 14px;
  }
  .col-33 {
    width: 33%;
    display: inline-block;
    vertical-align: top;
  }
  .upload-item-list {
    .el-col {
      height: 45px;
    }
  }
  .label-33 {
    width: 33%;
    display: inline-block;
    margin: 0 !important;
    .el-input-group {
      width: calc(100% - 50px);
    }
  }
  .boxCategories-lbl {
    font-size: 14px;
    padding-top: 6px;
    color: #409eff;
    font-weight: bold;
  }
}
</style>
<template>
  <div class="app-container calendar-list-container pdf-containier pack-con">
    <div class="pdf-out-con" v-if="!modelPbsId">
      <el-button type="warning" :disabled="exportLoadingSub" class="" @click="getPdf('文件导出','pdf-doc-other')" v-if="pageType=='export'">导出</el-button>
    </div>
    <div id="pdf-doc-other" :class="{'pdf-doc':pageType=='export'&&!modelPbsId}">
      <custom-card title="基本信息">
        <!-- <basic-form :basicInfo="basicInfo" :detail="pk.base" ref="basicForm"></basic-form> -->
        <el-form>
          <el-form-item :label="item.label+'：'" v-for="(item,index) in basicInfo" :key="index" class="col-33" :style="{width:item.col+'%'}">
            <span v-if="index!=5&&index!=4&&index!=9">{{pk.base[item.name]}}</span>
            <span v-if="index==4">{{pk.base.customerName}}</span>
            <span v-if="index==5">{{pk.base.productCategoryName}}</span>
            <span v-if="index==9">{{pk.base.packagingStructureEngineerName}}</span>
          </el-form-item>
        </el-form>
      </custom-card>
      <div>
        <custom-card title="附件" class="mt-30">
          <div>
            <el-row v-for="(item,index) in structureDocsOptions" :key="index" class="upload-item upload-item-list">
              <el-col :span="4">
                <span class="upload-name">{{language=='en'?item.labelZhCh:item.labelZhCh}}：</span>
              </el-col>
              <el-col :span="20">
                <a :href="baseUrl + '/' + item.file.fileUrl" class="upload-tip" target="_blank">{{item.file.fileName}}</a>
                <span v-if="!item.file.fileUrl" class="upload-tip">未上传</span>
              </el-col>
            </el-row>
          </div>
        </custom-card>
      </div>
      <el-form :model="pk.detail" :rules="pkDetailRules" ref="pkDetailForm">
        <custom-card title="包装要求" class="mt-30">
          <el-collapse v-model="activeName">
            <el-collapse-item title="纸箱" name="1">
              <custom-card title="种类选择(多选)" class="mt-30 packing-require" :class="{'empty-error':!pk.detail.boxFormingMethodFlag}">
                <el-form-item>
                  <div>{{getValues(options.boxCategoriesOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.boxCategories)}}
                    <span v-if="pk.detail.boxCategories&&pk.detail.boxCategories.indexOf('0')>-1">({{pk.detail.boxCategoriesDesc}}) </span>
                  </div>
                </el-form-item>
                <el-row v-for="option in options.boxCategoriesOptions" :key="option.id" v-if="pk.detail.boxCategories.join().indexOf(option.id)>-1">
                  <el-col :span="2" class="boxCategories-lbl">
                    {{language=='en'?option.labelZhCh:option.labelZhCh}}
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="长：" :prop="option.name+'Length'" class="label-33">
                      {{pk.detail[option.name+'Length']}}cm
                    </el-form-item>
                    <el-form-item label="宽：" :prop="option.name+'Width'" class="label-33">
                      {{pk.detail[option.name+'Width']}}cm
                    </el-form-item>
                    <el-form-item label="高：" :prop="option.name+'Height'" class="label-33">
                      {{pk.detail[option.name+'Height']}}cm
                    </el-form-item>
                  </el-col>
                </el-row>
              </custom-card>
              <custom-card title="形成方式" class="mt-30 packing-require">
                <el-form-item prop="boxFormingMethod">
                  <div>{{getValue(options.boxFormingMethodOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.boxFormingMethod)}}
                    <span v-if="pk.detail.boxFormingMethod&&pk.detail.boxFormingMethod.indexOf('0')>-1">({{pk.detail.boxFormingMethodDesc}}) </span>
                  </div>
                </el-form-item>
              </custom-card>
              <custom-card title="材质" class="mt-30 packing-require">
                <el-form-item prop="boxMaterial">
                  <div>{{getValue(options.boxMaterialOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.boxMaterial)}} </div>
                </el-form-item>
              </custom-card>
              <custom-card title="封口方式" class="mt-30 packing-require">
                <el-form-item prop="boxSealingMethod">
                  <div>{{getValue(options.boxSealingMethodOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.boxSealingMethod)}} </div>
                </el-form-item>
              </custom-card>
            </el-collapse-item>
            <el-collapse-item title="内衬" name="2">
              <custom-card title="种类选择" class="mt-30 packing-require">
                <el-form-item prop="liningCategories">
                  <div>{{getValue(options.liningCategoriesOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.liningCategories)}}
                    <!-- <span v-if="pk.detail.liningCategories&&pk.detail.liningCategories.indexOf('0')>-1">({{pk.detail.liningCategoriesDesc}}) </span> -->
                  </div>
                </el-form-item>
                <el-form-item label="长：" prop="liningLength" class="label-33">
                  {{pk.detail.liningLength}}cm
                </el-form-item>
                <el-form-item label="宽：" prop="liningWidth" class="label-33">
                  {{pk.detail.liningWidth}}cm
                </el-form-item>
                <el-form-item label="高：" prop="liningHeight" class="label-33">
                  {{pk.detail.liningHeight}}cm
                </el-form-item>
              </custom-card>
            </el-collapse-item>
            <el-collapse-item title="销售包装" name="3">
              <custom-card title="泡壳" class="mt-30 packing-require">
                <el-form-item label="种类选择：" prop="bubbleCategories">
                  <div>{{getValue(options.bubbleCategoriesOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.bubbleCategories)}}</div>
                </el-form-item>
                <el-form-item label="打孔：" prop="bubblePunch">
                  <div>{{getValue(options.bubblePunchOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.bubblePunch)}}
                    <span v-if="pk.detail.bubblePunch&&pk.detail.bubblePunch.indexOf('0')>-1">({{pk.detail.bubblePunchDesc}}) </span>
                  </div>
                </el-form-item>
                <el-form-item label="封口方式：" prop="bubbleSealingMethod">
                  <div>{{getValue(options.bubbleSealingMethodOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.bubbleSealingMethod)}}
                    <span v-if="pk.detail.bubbleSealingMethod&&pk.detail.bubbleSealingMethod.indexOf('0')>-1">({{pk.detail.bubbleSealingMethodDesc}}) </span>
                  </div>
                </el-form-item>
              </custom-card>
              <custom-card title="PE袋" class="mt-30 packing-require">
                <el-form-item label="种类选择：" prop="peCategories">
                  <div>{{getValue(options.peCategoriesOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.peCategories)}}</div>
                </el-form-item>
                <el-form-item label="打孔：" prop="pePunch">
                  <div>{{getValue(options.bubblePunchOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.pePunch)}}
                    <span v-if="pk.detail.pePunch&&pk.detail.pePunch.indexOf('0')>-1">({{pk.detail.pePunchDesc}}) </span>
                  </div>
                </el-form-item>
                <el-form-item label="封口方式：" prop="peSealingMethod">
                  <div>{{getValue(options.bubbleSealingMethodOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.peSealingMethod)}}
                    <span v-if="pk.detail.peSealingMethod&&pk.detail.peSealingMethod.indexOf('0')>-1">({{pk.detail.peSealingMethodDesc}}) </span>
                  </div>
                </el-form-item>
                <el-form-item label="厚度：" prop="peThickness">
                  <div>{{getValue(options.peThicknessOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.peThickness)}}</div>
                </el-form-item>
              </custom-card>
            </el-collapse-item>
          </el-collapse>
        </custom-card>
        <custom-card title="物流要求" class="mt-30">
          <el-collapse v-model="activeNameLog">
            <el-collapse-item title="装柜" name="1">
              <custom-card title="种类选择" class="mt-30 packing-require">
                <el-form-item prop="loadingCategories">
                  <div>{{getValue(options.loadingCategoriesOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.loadingCategories)}}
                    <span v-if="pk.detail.loadingCategories&&pk.detail.loadingCategories.indexOf('0')>-1">({{pk.detail.loadingCategoriesDesc}}) </span>
                  </div>
                </el-form-item>
              </custom-card>
              <custom-card title="托盘种类" class="mt-30 packing-require">
                <el-form-item prop="trayCategories" label="种类选择：">
                  <div>{{getValue(options.trayCategoriesOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.trayCategories)}}
                    <span v-if="pk.detail.trayCategories&&pk.detail.trayCategories.indexOf('0')>-1">({{pk.detail.trayCategoriesDesc}}) </span>
                  </div>
                </el-form-item>
                <el-form-item prop="trayPackingMethod" label="打包方式：">
                  <div>{{getValue(options.trayPackingMethodOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.trayPackingMethod)}}
                    <span v-if="pk.detail.trayPackingMethod&&pk.detail.trayPackingMethod.indexOf('0')>-1">({{pk.detail.trayPackingMethodDesc}}) </span>
                  </div>
                </el-form-item>
                <el-form-item prop="traySize" label="尺寸：">
                  <div>{{getValue(options.traySizeOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.traySize)}}
                    <span v-if="pk.detail.traySize&&pk.detail.traySize.indexOf('2')>-1">({{pk.detail.traySizeSpecified}}) </span>
                    <span v-if="pk.detail.traySize&&pk.detail.traySize.indexOf('0')>-1">({{pk.detail.traySizeDesc}}) </span>
                  </div>
                </el-form-item>
                <el-form-item prop="containerSize" label="柜子大小：">
                  <div>{{getValue(options.containerSizeOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.containerSize)}}
                    <span v-if="pk.detail.containerSize&&pk.detail.containerSize.indexOf('0')>-1">({{pk.detail.containerSizeDesc}}) </span>
                  </div>
                </el-form-item>
                <el-form-item :prop="item.name" :label="language=='en'?item.labelZhCh:item.labelZhCh+'装箱量：'" v-for="item in options.containerSizeOptions" :key="item.id">
                  {{pk.detail[item.name]}}
                </el-form-item>
              </custom-card>
            </el-collapse-item>
            <el-collapse-item title="物流" name="2">
              <custom-card title="种类选择" class="mt-30 packing-require">
                <el-form-item prop="logisticsCategories">
                  <div>{{getValue(options.logisticsCategoriesOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.logisticsCategories)}}
                  </div>
                </el-form-item>
              </custom-card>
            </el-collapse-item>
            <el-collapse-item title="跌落测试标准" name="3">
              <custom-card title="种类选择" class="mt-30 packing-require">
                <el-form-item prop="dropTestStandard">
                  <div>{{getValue(options.dropTestStandardOptions, 'id', (language=='en' ? 'labelZhCh':'labelZhCh'), pk.detail.dropTestStandard)}}
                  </div>
                </el-form-item>
              </custom-card>
            </el-collapse-item>
          </el-collapse>
        </custom-card>
      </el-form>
      <custom-card title="设计文稿" class="mt-30">
        <upload-list v-model="pk.designFileList" :disable="true"></upload-list>
      </custom-card>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BasicForm from '@/components/BasicForm/showDetail';
import * as api from '@/api/packing/index';
import structureMixins from '../mixins/structure';
import UploadList from '@/components/UploadList/index';

export default {
  name: 'user',
  components: {
    BasicForm,
    UploadList
  },
  mixins: [structureMixins],
  data() {
    return {
      modelPbsId: this.$route.query.modelPbsId,
      exportLoadingSub: true,
      pageType: null
    };
  },
  created() {
    this.pageType = this.$route.query.type;
    const setOptionIdToString = () => {
      for (const i in this.options) {
        this.options[i].forEach((value, key) => {
          value.id = value.id.toString();
          if (value.value > -1) {
            value.value = value.value.toString();
          }
        });
      }
    };
    setOptionIdToString();
    const setBasicForm = () => {
      this.basicInfo.map(item => {
        if (item.hidden) {
          item.hidden = false;
        }
        if (item.name === 'customerId') {
          item.name = 'customerName';
          item.element = 'input';
        }
        if (item.name === 'pdsConfCategoryArray') {
          item.name = 'productCategoryName';
          item.element = 'input';
        }
        if (
          item.name === 'requestCompletionDate' ||
          item.name === 'plmModelNo'
        ) {
          item.element = 'input';
        }
        if (item.name === 'packagingStructureEngineer') {
          item.name = 'packagingStructureEngineerName';
          item.element = 'input';
        }
      });
    };
    setBasicForm();
    const setFormNotRequired = () => {
      for (const i in this.pkDetailRules) {
        this.pkDetailRules[i].required = false;
      }
    };
    setFormNotRequired();
    this.getDetailByModelPbsId();
  },
  watch: {
    // modelPbsId(val) {
    //   this.getDetailByModelPbsId()
    // }
  },
  activated() {
    this.pageType = this.$route.query.type;
    this.page = this.$route.path.indexOf('require') > -1 ? 'apply' : 'design';
    this.applyId = this.$route.query.applyId;
    if (this.$route.query.applyId) {
      this.getApplyStructureDetai();
    }
    this.modelPbsId = this.$route.query.modelPbsId;
    this.getDetailByModelPbsId();
  },
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  methods: {
    setPdfPage() {
      // let arr_dom = [];
      // page = 1;
      const pdf = document.getElementById('pdf-doc-other');
      const pageHeight = pdf.offsetWidth / 592.28 * 841.89;

      const preOrder = node => {
        let childs = node.children,
          item;
        for (let i = 0; i < childs.length; i++) {
          item = childs[i];
          if (item.nodeType === 1) {
            // 递归先序遍历子节点
            const offsetTop =
              item.getBoundingClientRect().top -
              pdf.getBoundingClientRect().top;
            const height = item.getBoundingClientRect().height + offsetTop;
            if (Math.floor(offsetTop / pageHeight) != Math.floor(height / pageHeight)) {
              if (item.className.indexOf('el-collapse-item__header') !== -1 || item.children.length == 0) {
                const paddingTop = Math.ceil(offsetTop / pageHeight) * pageHeight - offsetTop + 10;
                console.log('item', item, paddingTop);
                item.setAttribute('style', 'padding-top: ' + paddingTop + 'px');
              }
              preOrder(item);
            }
          }
        }
      };
      preOrder(pdf);
    },
    // 查询产品PPD结构设计
    getDetailByModelPbsId() {
      if (!this.$route.query.modelPbsId) {
        return;
      }
      this.loading = true;
      if (this.$route.path.indexOf('sale') > -1) {
        api
          .getDesignStructurePPDByArticle({ articleId: this.modelPbsId })
          .then(res => {
            this.refreshCb(res);
          });
      } else {
        api.getDesignStructurePPD({ modelPbsId: this.modelPbsId }).then(res => {
          this.refreshCb(res);
        });
      }
    },
    /* 单选值查询 */
    getValue(list, keyName, valueName, value) {
      let resStr = '';
      if (list) {
        list.map(item => {
          if (item[keyName] === value) {
            resStr = item[valueName];
          }
        });
      }
      return resStr;
    },
    /* 多选值查询 */
    getValues(list, keyName, valueName, valueList) {
      const resList = [];
      if (list) {
        list.map(item => {
          valueList.map(subItem => {
            if (item[keyName] === subItem) {
              resList.push(item[valueName]);
            }
          });
        });
      }
      return resList.join(',');
    }
  }
};
</script>
